<template>
	<div class="scroll-wrapper" ref="scrollWrapper" :class="{'no-scroll': ifNoScroll}" @scroll.passive="handleScroll">
		<slot name="menu"></slot>
	</div>
</template>

<script>
	import { realPx } from '@/utils/common.js';
	
	export default {
		props: {
			top: {
				type: Number,
				default: 0
			},
			bottom: {
				type: Number,
				default: 0
			},
			ifNoScroll: {
				type: Boolean,
				default: false
			}
		},
		methods: {
			handleScroll(e) {
				const offsetY = e.target.scrollTop || window.pageYOffset || document.body.scrollTop
				this.$emit('onScroll', offsetY)
			},
			scrollTo(x,y) {
				this.$refs.scrollWrapper.scrollTo(x,y)
			},
			refresh() {
				if(this.$refs.scrollWrapper) {
					this.$refs.scrollWrapper.style.height = window.innerHeight - realPx(this.top) - realPx(this.bottom) + 'px'
					this.$refs.scrollWrapper.addEventListener('scroll',this.handleScroll)
				}
			}
		},
		mounted() {
			this.refresh()
		}
	}
	
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
	@import '@/assets/styles/global.scss';
	
	.scroll-wrapper {
		position: relative;
		width: 100%;
		z-index: 100;
		overflow-x: hidden;
		overflow-y: scroll;
		-webkit-overflow-scrolling: touch; // 为了让移动端变得丝滑
		&::-webkit-scrollbar {
			display: none;
		}
		&.no-scroll {
			overflow: hidden;
		}
	}
	
	
</style>
